.format-options-popover {
	.ant-popover-inner {
		border-radius: 4px;
		border: 1px solid var(--bg-slate-400);
		background: linear-gradient(
			139deg,
			var(--bg-ink-400) 0%,
			var(--bg-ink-500) 98.68%
		);
		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(20px);
		padding: 0;
		margin: 6px 0;

		.nested-menu-container {
			z-index: 2;
			position: relative;
			right: -2px;
			width: 240px;

			.font-size-dropdown {
				display: flex;
				flex-direction: column;

				.back-btn {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 12px;
					border: none !important;
					box-shadow: none !important;

					.icon {
						flex-shrink: 0;
					}

					.text {
						color: var(--bg-slate-50);
						font-family: Inter;
						font-size: 11px;
						font-style: normal;
						font-weight: 500;
						line-height: 20px; /* 142.857% */
						letter-spacing: 0.14px;
						text-transform: uppercase;
					}
				}

				.back-btn:hover {
					background-color: unset !important;
				}

				.content {
					display: flex;
					flex-direction: column;
					.option-btn {
						display: flex;
						align-items: center;
						padding: 12px;
						border: none !important;
						box-shadow: none !important;
						justify-content: space-between;

						.icon {
							flex-shrink: 0;
						}
						.text {
							color: var(--bg-vanilla-400);
							font-family: Inter;
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: normal; /* 142.857% */
							letter-spacing: 0.14px;
							text-transform: capitalize;
						}

						.text:hover {
							color: var(--bg-vanilla-300);
						}
					}

					.option-btn:hover {
						background-color: unset !important;
					}
				}
			}

			.font-size-container {
				padding: 12px;
				display: flex;
				flex-direction: column;
				gap: 12px;

				.title {
					color: var(--bg-slate-50);
					font-family: Inter;
					font-size: 11px;
					font-style: normal;
					font-weight: 500;
					line-height: 18px; /* 163.636% */
					letter-spacing: 0.88px;
					text-transform: uppercase;
				}

				.value {
					display: flex;
					height: 20px;
					padding: 4px 0px;
					justify-content: space-between;
					align-items: center;
					border: none !important;
					.font-value {
						color: var(--bg-vanilla-400);
						font-family: Inter;
						font-size: 13px;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
						letter-spacing: 0.14px;
						text-transform: capitalize;
					}
					.icon {
					}
				}

				.value:hover {
					background-color: unset !important;
				}
			}

			.menu-container {
				padding: 12px;

				.title {
					font-family: Inter;
					font-size: 11px;
					font-weight: 500;
					line-height: 18px;
					letter-spacing: 0.08em;
					text-align: left;
					color: var(--bg-slate-50);
				}

				.menu-items {
					display: flex;
					gap: 8px;
					flex-direction: column;
					margin-top: 12px;
				}

				.item {
					font-family: Inter;
					font-size: 13px;
					font-weight: 400;
					line-height: 17px;
					letter-spacing: 0.01em;
					text-align: left;

					.item-label {
						display: flex;
						color: var(--bg-vanilla-400, #c0c1c3);
						justify-content: space-between;
						align-items: center;
					}

					cursor: pointer;
				}
			}

			.horizontal-line {
				height: 1px;
				background: #1d212d;
			}

			.max-lines-per-row {
				padding: 12px;

				.title {
					color: var(--bg-slate-50);
					font-family: Inter;
					font-size: 11px;
					font-style: normal;
					font-weight: 500;
					line-height: 18px; /* 163.636% */
					letter-spacing: 0.88px;
					text-transform: uppercase;

					margin-bottom: 12px;

					display: flex;
					justify-content: space-between;
					align-items: center;

					.lucide {
						color: var(--bg-vanilla-400, #c0c1c3);
						cursor: pointer;
					}
				}

				.max-lines-per-row-input {
					display: flex;

					.ant-input-number-handler-wrap {
						display: none;
					}

					.ant-input-number {
						min-width: 36px;
						width: auto;
						border-right: none;
						border-left: none;
						border-top: 1px solid var(--bg-slate-400);
						border-bottom: 1px solid var(--bg-slate-400);
						text-align: center;
						height: 26px;
						border-radius: 0;

						&:active,
						&:focus {
							border: none;
							box-shadow: none;
						}
					}

					.ant-input-number-focused {
						box-shadow: none !important;
					}

					.ant-input-number-input-wrap {
						input {
							text-align: center;
							font-size: 13px;

							&:active,
							&:focus {
								border: none;
							}
						}

						&:active,
						&:focus {
							border: none;
						}
					}

					.periscope-btn {
						box-shadow: none;
						padding: 6px 12px;
						height: 26px;

						border-radius: 0px 1px 1px 0px;
						background: var(--bg-ink-300, #16181d);
					}
				}
			}

			.add-new-column-container {
				display: flex;
				flex-direction: column;

				.add-new-column-header {
					display: flex;
					flex-direction: column;
					padding: 8px;
					gap: 8px;

					.back-icon {
						cursor: pointer;
					}

					.title {
						display: flex;
						gap: 4px;
						align-items: center;
						color: var(--bg-slate-50);
						text-transform: uppercase;
						font-size: 11px;
						font-weight: 500;
						line-height: 18px;
						letter-spacing: 0.88px;
					}
				}

				.add-new-column-content {
					display: flex;
					flex-direction: column;

					padding-bottom: 16px;

					min-height: 240px;
					max-height: 400px;

					.loading-container {
						padding: 8px;
					}

					.column-format-new-options {
						overflow-y: auto;
						overflow-x: hidden;

						.column-name {
							padding: 4px 8px;
							border-radius: 1px;
							color: var(--bg-vanilla-400, #c0c1c3);
							font-family: Inter;
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 20px; /* 142.857% */
							letter-spacing: -0.07px;

							&.selected {
								background-color: var(--bg-ink-200);
								cursor: pointer;
							}
						}

						&::-webkit-scrollbar {
							height: 1rem;
							width: 0.2rem;
						}
					}
				}
			}

			.selected-item-content-container {
				.add-new-column-header {
					padding: 8px;
				}

				.title {
					color: var(--bg-slate-50);
					font-family: Inter;
					font-size: 11px;
					font-style: normal;
					font-weight: 500;
					line-height: 18px; /* 163.636% */
					letter-spacing: 0.88px;
					text-transform: uppercase;

					margin-bottom: 12px;

					display: flex;
					justify-content: space-between;
					align-items: center;

					.lucide {
						color: var(--bg-vanilla-400, #c0c1c3);
						cursor: pointer;
					}
				}

				.horizontal-line {
					height: 1px;
					background: #1d212d;
				}

				.loading-container {
					margin: 12px 0;
				}

				.item-content {
					padding: 12px;

					.column-format,
					.column-format-new-options {
						display: flex;
						gap: 12px;
						flex-direction: column;
						margin-top: 12px;

						.column-name {
							color: var(--bg-vanilla-400, #c0c1c3);
							font-family: Inter;
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 20px; /* 142.857% */
							letter-spacing: -0.07px;

							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 8px;

							cursor: pointer;

							&.default-column {
								color: var(--bg-vanilla-400, #c0c1c3);
								cursor: not-allowed;
							}

							&.no-columns-selected {
								color: var(--bg-slate-100);
								font-size: 12px;
								cursor: not-allowed;
							}

							&.add-new-column-btn {
								color: var(--bg-vanilla-400, #c0c1c3);
								cursor: pointer;
							}

							.name {
								flex: 1;
								overflow: hidden;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;

								cursor: pointer;
							}

							.delete-btn {
								display: none;
								flex: 0 0 16px;
								cursor: pointer;
							}

							&:hover {
								.delete-btn {
									display: block;
								}
							}
						}

						overflow-x: hidden;

						&::-webkit-scrollbar {
							height: 1rem;
							width: 0.2rem;
						}
					}

					.column-format {
						max-height: 150px;
						overflow: auto;
						overflow-x: hidden;
					}

					.column-format-new-options {
						max-height: 150px;
						overflow-y: auto;
						overflow-x: hidden;
					}

					.column-divider {
						margin: 12px 0;
						border-top: 2px solid var(--bg-slate-400);
					}
				}
			}

			&.active {
				.nested-menu-container {
					backdrop-filter: blur(18px);

					.item {
						.item-label {
							color: var(--bg-vanilla-400);
						}
					}
				}

				.selected-item-content-container {
					width: 110%;
					margin-left: -5%;

					border-radius: 4px;
					border: 1px solid var(--bg-slate-400);
					background: linear-gradient(
						139deg,
						rgba(18, 19, 23, 0.8) 0%,
						rgba(18, 19, 23, 0.9) 98.68%
					);

					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
					backdrop-filter: blur(20px);

					.column-format {
						margin-top: 0px;
					}
				}
			}
		}
	}
}

.lightMode {
	.format-options-popover {
		.ant-popover-inner {
			border: 1px solid var(--bg-vanilla-300);
			background: linear-gradient(
				139deg,
				rgba(255, 255, 255, 0.8) 0%,
				rgba(255, 255, 255, 0.9) 98.68%
			);
			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);

			.nested-menu-container {
				.font-size-dropdown {
					.back-btn {
						.text {
							color: var(--bg-ink-400);
						}
					}

					.content {
						.option-btn {
							.text {
								color: var(--bg-ink-400);
							}

							.text:hover {
								color: var(--bg-ink-300);
							}
						}
					}
				}

				.add-new-column-container {
					.add-new-column-header {
						.title {
							color: var(--bg-ink-100);
						}
					}

					.add-new-column-content {
						.column-format-new-options {
							.column-name {
								color: var(--bg-ink-400);

								&.selected {
									background-color: var(--bg-vanilla-400);
								}
							}
						}

						.loading-container {
							color: var(--bg-ink-400);
						}
					}
				}

				.font-size-container {
					.title {
						color: var(--bg-ink-100);
					}

					.value {
						.font-value {
							color: var(--bg-ink-400);
						}
					}
				}

				.horizontal-line {
					background: var(--bg-vanilla-300);
				}

				.item-content {
					.column-divider {
						border-top: 2px solid var(--bg-vanilla-300);
					}
				}

				.max-lines-per-row {
					.title {
						color: var(--bg-ink-200);

						.lucide {
							color: var(--bg-ink-300);
						}
					}

					.max-lines-per-row-input {
						border: 1px solid var(--bg-vanilla-300);

						.periscope-btn {
							background: var(--bg-vanilla-300);
						}
					}
				}

				.menu-container {
					.title {
						color: var(--bg-ink-200);
					}

					.item {
						.item-label {
							color: var(--bg-ink-400);
						}
					}
				}

				.selected-item-content-container {
					.title {
						color: var(--bg-ink-200);

						.lucide {
							color: var(--bg-ink-300);
						}
					}

					.horizontal-line {
						background: var(--bg-vanilla-300);
					}

					.item-content {
						.max-lines-per-row-input {
							border: 1px solid var(--bg-vanilla-300);

							.periscope-btn {
								background: var(--bg-vanilla-300);
							}
						}

						.column-format,
						.column-format-new-options {
							.column-name {
								color: var(--bg-ink-300);
							}
						}
					}
				}

				&.active {
					.nested-menu-container {
						backdrop-filter: blur(18px);

						.item {
							.item-label {
								color: var(--bg-ink-300);
							}
						}
					}

					.selected-item-content-container {
						border: 1px solid var(--bg-vanilla-300);
						background: linear-gradient(
							139deg,
							rgba(255, 255, 255, 0.8) 0%,
							rgba(255, 255, 255, 0.9) 98.68%
						);

						box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
					}
				}
			}
		}
	}
}
